<template>
  <div class="file-manager">
    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <el-button type="primary" @click="$router.push('/fileupload')">
          <el-icon><Upload /></el-icon>
          上传文件
        </el-button>
        <el-button @click="$router.push('/new')">
          <el-icon><FolderAdd /></el-icon>
          新建文件夹
        </el-button>
        <el-button @click="refreshFiles">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
      
      <div class="toolbar-right">
        <el-select v-model="viewMode" @change="handleViewModeChange">
          <el-option label="列表视图" value="list" />
          <el-option label="网格视图" value="grid" />
        </el-select>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <Search />
    </div>

    <!-- 文件列表 -->
    <div class="file-content">
      <Table v-if="viewMode === 'list'" />
      <div v-else class="grid-view">
        <!-- 网格视图内容 -->
        <div class="grid-placeholder">
          <el-empty description="网格视图开发中...">
            <el-button @click="viewMode = 'list'">切换到列表视图</el-button>
          </el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Upload, FolderAdd, Refresh } from '@element-plus/icons-vue';
import Search from '@/components/search.vue';
import Table from '@/components/table.vue';

const viewMode = ref('list');

const refreshFiles = () => {
  // 触发文件列表刷新
  window.location.reload();
  ElMessage.success('已刷新文件列表');
};

const handleViewModeChange = (mode) => {
  ElMessage.info(`已切换到${mode === 'list' ? '列表' : '网格'}视图`);
};
</script>

<style lang="less" scoped>
.file-manager {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 16px;
  
  .toolbar-left {
    display: flex;
    gap: 12px;
  }
  
  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.search-section {
  margin-bottom: 16px;
}

.file-content {
  flex: 1;
  overflow: hidden;
}

.grid-view {
  height: 100%;
  
  .grid-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    gap: 12px;
    
    .toolbar-left,
    .toolbar-right {
      width: 100%;
      justify-content: center;
    }
  }
}
</style>
